<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}">
		<view class="flex" style="gap: 20rpx;zoom: 0.8">
			<text style="opacity: 0">未来趋势</text>
			<view class="flex flex-col" style="gap: 20rpx;" v-if="isAch == 1">
				<view class="flex items-end">
					<text class="flex-1 flex justify-center">
						<view class="image-box">
							<image :src="cardList[4].tarot.front" mode="widthFix" v-if="cardList[4].dir == 0"></image>
							<image :src="cardList[4].tarot.back" mode="widthFix" v-else></image>
						</view>
					</text>
					<view class="flex-1 flex justify-center">
						<view class="image-box">
							<image :src="cardList[8].tarot.front" mode="widthFix" v-if="cardList[8].dir == 0"></image>
							<image :src="cardList[8].tarot.back" mode="widthFix" v-else></image>
						</view>
					</view>
					<text class="flex-1 flex justify-center">
						<image :src="cardList[12].tarot.front" mode="widthFix" v-if="cardList[12].dir == 0"></image>
						<image :src="cardList[12].tarot.back" mode="widthFix" v-else></image>
					</text>
				</view>
				<view class="flex image-box-box" style="gap: 20rpx">
					<view class="image-box" v-for="i in [2, 3, 5, 6, 7, 10, 11]" :key="i">
						<image :src="cardList[i].tarot.front" mode="widthFix" v-if="cardList[i].dir == 0"></image>
						<image :src="cardList[i].tarot.back" mode="widthFix" v-else></image>
					</view>
				</view>
				<view class="flex">
					<view class="flex justify-center flex-1" v-for="i in [1, 5, 9]" :key="i">
						<view class="image-box">
							<image :src="cardList[i].tarot.front" mode="widthFix" v-if="cardList[i].dir == 0"></image>
							<image :src="cardList[i].tarot.back" mode="widthFix" v-else></image>
						</view>
					</view>
				</view>
				<view class="flex justify-center">
					<view class="image-box">
						<image :src="cardList[0].tarot.front" mode="widthFix" v-if="cardList[0].dir == 0"></image>
						<image :src="cardList[0].tarot.back" mode="widthFix" v-else></image>
					</view>
				</view>
			</view>
			<view class="flex flex-col" style="gap: 20rpx;" v-else>
				<view class="flex items-end">
					<text class="flex-1 flex justify-center">
						<view class="image-box">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
							<view class="top-image-des flex flex-col items-center justify-center">
								<text>4</text>
								<text>果</text>
							</view>
						</view>
					</text>
					<view class="flex-1 flex justify-center">
						<view class="image-box">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
							<view class="top-image-des flex flex-col items-center justify-center">
								<text>8</text>
								<text>果</text>
							</view>
						</view>
					</view>
					<text class="flex-1 flex justify-center">
						<view class="image-box">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
							<view class="top-image-des flex flex-col items-center justify-center">
								<text>12</text>
								<text>果</text>
							</view>
						</view>
					</text>
				</view>
				<view class="flex image-box-box" style="gap: 20rpx">
					<view class="image-box" v-for="i in [2, 3, 5, 6, 7, 10, 11]" :key="i" :center="i">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex">
					<view class="flex justify-center flex-1" v-for="i in [1, 5, 9]" :key="i">
						<view class="image-box" :center="i">
							<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="flex justify-center">
					<view class="image-box" center="切">
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
</script>

<style>
	@import "./spread.css";

	.spread {
		height: auto;
		padding: 40rpx 0;
	}

	.spread text {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		white-space: nowrap;
		text-align: center;
	}

	.select-text {
		transform: translateY(calc(100% - 40rpx));
	}

	.spread .top-image-des {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		gap: 5rpx;
	}

	.spread .top-image-des text {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		font-weight: normal;
	}

	.image-box-box {
		position: relative;
	}

	.image-box-box:after {
		content: '未来趋势';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(calc(-100% - 20rpx), -50%);
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		white-space: nowrap;
	}

	.image-box {
		position: relative;
	}

	.image-box:after {
		content: attr(center);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30rpx;
		color: #fff;
	}

	.spread image {
		width: 80rpx;
	}
</style>